<template>
  <view class="container">
    <view class="header">
      <text class="title">导师介绍</text>
    </view>
    <view class="content">
      <view class="avatar-wrapper"> <!-- 连字符应为半角，删除空格 -->
        <image class="avatar" src="../../static/touxiang.jpg"></image> <!-- 连字符应为半角，删除空格 -->
        <view class="name-info"> <!-- 连字符应为半角，删除空格 -->
          <text class="name">鹏哥</text>
          <text class="degree">清华大学计算机博主</text>
          <text class="desc">18岁男大在线讲解java</text>
        </view>
      </view>
      <view class="details">
        <view class="item">
          <view class="dot"></view>
          <text class="detail-text">中国java第一人</text> <!-- 类名连字符修正 -->
        </view>
        <view class="item">
          <view class="dot"></view>
          <text class="detail-text">国家社科基金重大项目：“如何让每一个学生成为Java高手”</text>
        </view>
        <view class="item">
          <view class="dot"></view>
          <text class="detail-text">教育部人文社科项目：“研究学生再写java时的心理活动”</text>
        </view>
        <view class="item">
          <view class="dot"></view>
          <text class="detail-text">三亿少女的梦中情人，java界的至高讲师</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.container {
	height: 500rpx;
  padding: 20rpx;
}
.header {
  text-align: center; /* 连字符应为半角，删除空格 */
  margin-bottom: 30rpx; /* 连字符应为半角，删除空格 */
}
.title {
  font-size: 36rpx; /* 连字符应为半角，删除空格 */
  font-weight: bold;
}
.content {
  background-color: #fff; /* 连字符应为半角，删除空格 */
  border-radius: 10rpx; /* 连字符应为半角，删除空格 */
  padding: 20rpx;
  height: 100%;
}
.avatar-wrapper {
  display: flex;
  align-items: center; /* 连字符应为半角，删除空格 */
  margin-bottom: 20rpx;
}
.avatar {
  width: 300rpx;
  height: 300rpx;
  /* border-radius: 50%; */
  margin-right: 20rpx;
}
.name-info {
  flex: 1;
}
.name {
  font-size: 50rpx; /* 连字符应为半角，删除空格 */
  font-weight: bold;
  display: block;
  text-align: center;
}
.degree {
  font-size: 32rpx; /* 连字符应为半角，删除空格 */
  color: #666;
  display: block;
  text-align: center;
  margin-top: 30rpx;
}
.desc {
  font-size: 32rpx; /* 连字符应为半角，删除空格 */
  color: #999;
  display: block;
text-align: center;
margin-top: 30rpx;
}
.details {
  margin-top: 20rpx;
}
.item {
  display: flex;
  align-items: center; /* 连字符应为半角，删除空格 */
  margin-bottom: 30rpx;
}
.dot {
  width: 20rpx;
  height: 20rpx;
  border-radius: 50%;
  background-color: #000;
  margin-right: 15rpx;
}
.detail-text {
  font-size: 35rpx; /* 连字符应为半角，删除空格 */
}
</style>

<script>
export default {
  data() {
    return {};
  },
  onLoad() {
    // 页面加载时的逻辑，可在此处添加获取数据等操作
  }
};
</script>